<!DOCTYPE html>
 <html>
<head>
     <meta name="viewport" content="width=device-width" />
   <title>Swipe</title>
     <script src="/Script/hammer.js"></script>
     <style type="text/css">
         html, body {
             width: 100%;
             height: 100%;
             margin: 0px;
             padding: 0px;
        }
 
         .test {
             width: 100%;
             height: 50%;
             background: #ffd800;
             text-align: left;
        }
 
         .result {
             width: 100%;
             height: 50%;
             background: #b6ff00;
             text-align: left;
         }
     </style>
 </head>
 <body>
     <div id="test" class="test">事件区域</div>
     <div id="result" class="result">事件结果：向左滑动触发<br /></div>
     <script type="text/javascript">
         //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
         var hammertime = new Hammer(document.getElementById("test"));
         //添加事件
         hammertime.on("swipeleft", function (e) {
             document.getElementById("result").innerHTML += "X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />";
             //控制台输出
             console.log(e);
         });
     </script>
 </body>
 </html>